<template>
  <div class="login">
    <div class="login_title">
      <span>即时展示资源平台</span>
    </div>
    <div class="login_box">
      <div class="face_box">
        <img src="../assets/img/face.jpg" alt="">
      </div>
      <div class="login_form">
        <el-form ref="form" :model="formInline" :rules="rules" class="form_body">
          <el-form-item class="form_input" prop="username">
            <el-input prefix-icon="el-icon-user" v-model="formInline.username"></el-input>
          </el-form-item>
          <el-form-item class="form_input" prop="password">
            <el-input prefix-icon="el-icon-lock" type="password" v-model="formInline.password"></el-input>
          </el-form-item>
          <el-form-item class="form_btn">
            <el-button type="primary" @click="onSubmit" class="submit" >登录</el-button>
<!--            <el-button type="primary" @click="register" class="register">注册</el-button>-->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      formInline: {
        username: '',
        password: ''
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      }
    }
  },
  methods: {
    onSubmit() {
      // if (this.formInline.username === ''){
      //   this.$message.error("请输入用户名")
      // }else if (this.formInline.password === ''){
      //   this.$message.error("请输入密码")
      // }else{
      //   console.log("登录")
      // }
      this.$refs.form.validate(valid => {
        if (valid){
          const _this = this
          this.$axios.post("http://localhost:8081/login",this.formInline).then(res => {
            const jwt = res.headers['authorization']
            const userInfo = res.data.data

            _this.$store.commit("SET_TOKEN",jwt)
            _this.$store.commit("SET_USERINFO",userInfo)

            _this.$router.push("/Student")
          })
        }
      })
    },
    register() {
      console.log("注册")
    }
  },
  mounted () {
    document.onkeyup = (event) => {
      const key = event.keyCode
      if (key === 13) {
        this.onSubmit()
      }
    }
  },
  beforeDestroy () { // 销毁时销毁键盘事件
    document.onkeyup = null
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("/image/bg_img.png");
  position: fixed;
  top: 0;
  left: 0;
  min-width: 1000px;
  zoom: 1;
  background-color: #000000;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;

  .login_title {
    font-family: songFont;
    color: #ffffff;
    font-size: 60px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -9;
  }

  .login_box {
    width: 500px;
    height: 300px;
    //background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 0;
    border-radius: 10px;
    transform: translate(-50%, -50%);

    .face_box {
      width: 120px;
      height: 120px;
      position: absolute;
      //top:-50px;
      left: 50%;
      transform: translate(-50%, -50%);

      img {
        width: 100%;
        height: 100%;
        border: 2px solid #ffffff;
        border-radius: 50%;
      }
    }

    .login_form {
      width: 100%;
      height: 350px;
      display: flex;
      //justify-content: center;
      align-items: center;
      margin-left: 50px;

      .form_body {
        width: 80%;
        //box-sizing: border-box;
      }
    }
  }
}

.form_btn {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;

  .submit {
    background-color: black;
    border-color: black;
    width: 120px;
  }

  .register {
    color: black;
    font-weight: bold;
    background-color: #ffffff;
    border-color: #ffffff;
  }
}
</style>
